<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">姓名</span>
      <el-input v-model="name" size="medium" clearable disabled class="inline-input" placeholder="菅琦伯" />

      <span class="txt">工号</span>
      <el-input v-model="number" size="medium" clearable disabled class="inline-input" placeholder="00000001" />

      <span class="txt">时间</span>
      <el-date-picker
        v-model="time"
        disabled
        style="width: 370px"
        size="medium"
        type="daterange"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="2019.10.10 08:00:00"
        end-placeholder="2019.10.11 08:00:00"
        @change="chooseTimeRange" />

      <el-button
        type="primary"
        icon="el-icon-search"
        size="medium"
        style="margin-left:40px"
        @click="onSubmit"
      >查询</el-button>
    </form>

    <div class="map">
      <baidu-map id="usermap" :center="center" :zoom="zoom"></baidu-map>
    </div>
  </div>
</template>

<script>
import HttpInterface from "../../../util/httpInterface";
import BMap from "BMap"

export default {
  name: "StaffTrack",
  components: {},
  data() {
    return {
      name: "",
      number: "",
      time: "",
      center: {
        lng: 0,
        lat: 0
      },
      zoom: 3,
      userLocationInfo: []
    };
  },

  mounted() {
    this.ready();
  },

  methods: {
    ready: function() {
      var map = new BMap.Map("usermap");  // 创建Map实例
      var point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 16);  // 初始化地图,设置中心点坐标和地图级别


      // 添加带有定位的导航控件
      var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
      });
      map.addControl(navigationControl);

      // 添加定位控件
      var geolocationControl = new BMap.GeolocationControl();
      geolocationControl.addEventListener("locationSuccess", function(e){
        // 定位成功事件
        var address = '';
        address += e.addressComponent.province;
        address += e.addressComponent.city;
        address += e.addressComponent.district;
        address += e.addressComponent.street;
        address += e.addressComponent.streetNumber;
      });
      map.addControl(geolocationControl);



      var data_info = [
        // [116.417854, 39.921988],
        // [116.406605, 39.921585],
        // [116.412222, 39.912345]
      ];
      // var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
      //   scale: 0.5,           // 图标缩放大小
      //   strokeColor:'#fff',   // 设置矢量图标的线填充颜色
      //   strokeWeight: '2',    // 设置线宽
      // });
      // var icons = new BMap.IconSequence(sy, '10', '30');

      var pointArray = [];
      var len = data_info.length;
      if (len == 0) return;

      for (var i = 0; i < len; i ++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));  // 创建标注
        pointArray[i] = new BMap.Point(data_info[i][0], data_info[i][1]);
        map.addOverlay(marker);   // 将标注添加到地图中
      }
      var polyline = new BMap.Polyline(pointArray, {
        strokeColor:"#18A45B",
        strokeWeight: 6,
        strokeOpacity: 0.8,
        // icons: [icons],
        // enableEditing: false
      });   // 创建折线

      map.addOverlay(polyline);    // 增加折线
      // 让所有点在视野范围内
      map.setViewport(pointArray);

      map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    },

    // 时间选择
    chooseTimeRange() {
      console.log(this.time);
    },

    // 查询
    onSubmit() {

    }
  }
};
</script>

<style  scoped>
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}

.map {
  width: 100%;
  height: calc(100vh - 160px);
}

#usermap {
  width: 100%;
  height: 100%;
}

/* 隐藏地图logo */
#usermap >>> .anchorBL {
  display: none;
}
</style>
